#loading{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	.loading-text{
		text-align: center;
		color: #FFF;
		font-size: 1rem;
		position: absolute;
		top: 50%;
		margin-top: 3rem;
		left: 0;
		right: 0;
	}
	.loading{
		position:absolute;
		top: 50%;
		left: 50%;
		margin-left: -3rem;
		margin-top: -3rem;
		width: 6rem;
		height: 6rem;
		animation:loading-rotate 2.4s linear infinite;
		.white {
			top:0;bottom:0;left:0;right:0;background:white;opacity:0;
			animation:loading-flash 2.4s linear infinite;
		}
		.dot {
			position:absolute;margin:auto;width:2.4em;height:2.4em;border-radius:100%;
			transition:all 1s ease;
			&:nth-child(2) {
				top:0;bottom:0;left:0;background:#FF4444;
				animation:loading-dotsY 2.4s linear infinite;
			}
			&:nth-child(3) {
				left:0;right:0;top:0;background:#FFBB33;
				animation:loading-dotsX 2.4s linear infinite;
			}
			&:nth-child(4) {
				top:0;bottom:0;right:0;background:#99CC00;
				animation:loading-dotsY 2.4s linear infinite;
			}
			&:nth-child(5) {
				left:0;right:0;bottom:0;background:#33B5E5;
				animation:loading-dotsX 2.4s linear infinite;
			}
		}
	}
}

@keyframes loading-rotate {
	0% {
		transform:rotate( 0 );
	}
	10% {
		width:6rem;
		height:6rem;
	}
	66% {
		margin-left: -1.2rem;
		margin-top: -1.2rem;
		width:2.4rem;
		height:2.4rem;
	}
	100% {
		transform:rotate(360deg);
		width:6rem;
		height:6rem;
	}
}

@keyframes loading-dotsY {
	66% {
		opacity:.1;
		width:2.4em;
	}
	77% {
		opacity:1;
		width:0;
	}
}

@keyframes loading-dotsX {
	66% {
		opacity:.1;
		height:2.4em;
	}
	77% {
		opacity:1;
		height:0;
	}
}

@keyframes loading-flash {
	33% {
		opacity:0;
		border-radius:0%;
	}
	55% {
		opacity:.6;
		border-radius:100%;
	}
	66% {
		opacity:0;
	}
}